<template>
	<div>
		<el-dialog title="肝损害剂量自定义" :visible.sync="dialogVisibleXiangHu" width="60%" :before-close="handleClose">
			<el-card>
				<el-row :gutter="15">
					<el-form label-width="80px">
						<el-col :span="24">
							<el-form-item label="年龄>=">
								<div class="dialogFirstRow">
									<el-input v-model="age_low" v-only-number="{max:10000000000,min:0,precision:0}" size="mini" ></el-input>
									<el-select v-model="age_low_unit" size="mini">
										<el-option v-for="item in ageOptions" :key="item.value" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
									<label><= &nbsp;</label> 
									<el-input v-model="age_high" v-only-number="{max:10000000000,min:0,precision:0}" size="mini"></el-input>
									<el-select v-model="age_high_unit" size="mini">
										<el-option v-for="item in ageOptions" :key="item.value" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="警示级别">
								<el-select v-model="jsjbVal" placeholder="请选择警示级别">
									<el-option
									  v-for="item in jsjbOptions"
									  :key="item.value"
									  :label="item.label"
									  :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>	
						</el-col>
						<el-col :span="24">
							<el-form-item label="警示信息">
								<el-input type="textarea" v-model="jsxxVal"></el-input>
							</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<div class="clear">
					<el-button type="success" class="fr">保存</el-button>
				</div>
			</el-card>
			<el-card style="margin-top:10px">
				<Graytable :tHead="tHead" :tData="tData"></Graytable>
				<pagination
					:total="query.total"
					:page.sync="query.page"
					:limit.sync="query.limit"
					@pagination="getList"/>
			</el-card>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleXiangHu = false">关 闭</el-button>
			</span>
		</el-dialog>
		<SelectDialog ref="selectDialog" ctype="肝损害剂量" :checkId="checkId" @selectFun="selectFun"></SelectDialog>
	</div>
</template>

<script>
	import SelectDialog from "./selectDialog";
	export default {
		components: {
			SelectDialog
		},
		data () {
			return {
				query: {
				  total: 0,
				  page: 1,
				  limit: 10
				},
				jsjbVal:"",//警示级别value
				jsjbOptions:[
					{
					  value: '1',
					  label: '拦截'
					},
					{
					  value: '2',
					  label: '禁忌'
					},
					{
					  value: '3',
					  label: '不推荐'
					},
					{
					  value: '4',
					  label: '轻微'
					},
				],//警示级别options
				jsxxVal:"",//警示信息
				age_low_unit:"岁",//低年龄value
				age_low:"",//低年龄输入框
				ageOptions:[
					{
					  value: '岁',
					  label: '岁'
					},
					{
					  value: '月',
					  label: '月'
					},
					{
					  value: '天',
					  label: '天'
					},
				],//年龄options
				age_high:"",//高年龄输入框
				age_high_unit:"岁",//高年龄value
				dialogVisibleXiangHu:false,
				tHead:[
					{
						label:"操作",
						operate:["删除"],
						align:"center",
						width:"50px"
					},
					{
						prop:"aa",
						label:"儿童年龄段"
					},
					{
						prop:"aa",
						label:"警示级别"
					},
					{
						prop:"aa",
						label:"警示信息"
					},
					{
						prop:"aa",
						label:"维护人"
					},
				],
				tData:[
					{
						aa:"aa123"
					},
					{
						aa:"aa123"
					}
				],
				checkId:""
			}
		},
		methods:{
			selectFun(id,name){
				this.checkId=id;
			},
			openSelect () {
				this.$refs.selectDialog.show()
			},
			getList () {
				
			},
			show(){
				this.dialogVisibleXiangHu = true;
			},
			onSubmit () {
				
			},
			handleClose () {
				this.dialogVisibleXiangHu = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-card {
		margin-left: 3px;
	}

	.SearchT {
		display: flex;
		justify-content: flex-end;
		height: 40px;
		align-items: center;
		background-color: #e6edf3;
		font-size: 14px;
	}

	.tableLable {
		flex: 1;
		text-align: left;
		margin-left: 15px;
		letter-spacing: 2px;
		font-size: 14px;
		color: #32a6f3;
		font-weight: bold;
	}

	/* .exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
} */
	.tableStyle {
		width: 100%;
		height: 100%;
	}

	.card-table {
		width: 100%;
		height: 75%;
	}

	.block {
		text-align: center;
		margin-top: 12px;
		margin-bottom: 12px;
	}

	.Btn {
		display: flex;
		flex: 1;
		flex-wrap: nowrap;
	}

	.dialogFirstRow>>>.el-input {
		width: 70px;
		margin-right: 10px;
	}

	.el-form-item.s_selectbox>>>.el-form-item__content {
		width: 80%;
	}
	/* .demo-form-inline>>>.el-form-item {
		margin-bottom: 0px;
	} */
</style>
